import React, { useState, useEffect } from 'react';
import { Form, Button, Space } from 'antd';
import { goBack, componentsMap } from '@/utils/util';
import API from '@/api/xjindex.js';
import FileList from '@/components/FileLists';
import moment from 'moment';

const propertyCheck = ({ history }) => {
  const [form] = Form.useForm();
  const [fileList, setfileList] = useState([]);
  const [isshow, setIsShow] = useState(false);
  const [orgList, setOrgList] = useState([]);
  const [GDZCLX, setGDZCLX] = useState([]);
  form.setFieldsValue({
    createTime: moment().format('YYYY-MM-DD'),
  });
  const TableList = [
    {
      label: '资产名称',
      name: 'assetName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '所属单位',
      name: 'affiliatedUnit',
      type: 'select',
      otherProps: {
        options: orgList,
        disabled: true,
      },
    },
    {
      label: '资产类型',
      name: 'assetType',
      type: 'select',
      otherProps: {
        disabled: true,
        options: GDZCLX,
      },
    },
    {
      label: '资产型号',
      name: 'assetModel',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '设备IP',
      name: 'deviceIp',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '部署位置',
      name: 'deploymentLocation',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '采购年限',
      name: 'procurementYears',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入采购年限',
        },
      ],
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '创建人',
      name: 'createName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '创建时间',
      name: 'createTime',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '备注说明',
      name: 'remarks',
      type: 'textarea',
      isremark: true,
      otherProps: {
        disabled: true,
      },
    },
  ];

  const TableMaintain = [
    {
      label: '运维单位',
      name: 'maintenanceUnit',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '联系人',
      name: 'contacts',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '联系方式',
      name: 'contactInformation',
      type: 'input',
      otherProps: {
        disabled: true,
      },
      rules: [
        {
          pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
          message: '手机号格式不正确',
        },
      ],
    },
  ];

  function initList() {
    API.selectAssetFixedById({ id: history.location.query.id }).then((res) => {
      if (res) {
        form.setFieldsValue({
          ...res.t,
          createTime: moment(res.t.createTime, 'YYYY-MM-DD'),
        });
        setfileList(res.t.assetFixedFileList);
      }
    });
    API.getOrgList().then((res) => {
      if (res) {
        setOrgList(
          res.t.map((item) => {
            return {
              label: item.name,
              value: item.id,
            };
          }),
        );
      }
    });
    API.getGDZCLX().then((res) => {
      if (res) {
        const result = res.t.map((item) => {
          return {
            label: item.dictItemName,
            value: item.dictItemType,
          };
        });
        setGDZCLX(result);
      }
    });
  }

  useEffect(() => {
    initList();
  }, []);
  return (
    <div className="main-x">
      <Form form={form}>
        <div className="base-title">基本信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {TableList.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                >
                  {componentsMap(item.type, item.otherProps, true)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title maintain">运维信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {TableMaintain.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                  rules={item.rules}
                >
                  {componentsMap(item.type, item.otherProps)}
                </Form.Item>
              );
            })}
          </div>
        </div>
        <div className="base-title mt20">附件信息</div>
        <div className="form-x bgf" style={{ paddingBottom: '16px' }}>
          <Form.Item label="附件信息" className="block">
            <FileList
              fileList={fileList}
              downloadUrl="/assetFixed/AssetFixedDownload"
            />
          </Form.Item>
        </div>
        <div className="footer-x">
          <Space size={18}>
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
};
export default propertyCheck;
